<template>
  <div class="preview-container" v-if="data">
    <div class="preview-container-title">
      {{ data.component?.__title || data.lib?.__title }}
    </div>
    <div class="preview-container-desc">
      <p>{{ data.lib?.__desc }}</p>
      <p>{{ data.component?.__desc }}</p>
    </div>
    <div class="preview-container-main">
      <div class="chart-container">
        <template v-if="data.lib">
          <span>模版效果</span>
          <component :is="data.lib"></component>
        </template>
        <template v-if="data.component">
          <span>示例效果</span>
          <component :is="data.component"></component>
        </template>
      </div>
      <el-tabs v-model="activeName" type="border-card" class="full-tab">
        <el-tab-pane label="模版" name="template" v-if="data.lib">
          <pre class="code" v-html="renderHtml(data.lib.__sourceCode)"></pre>
        </el-tab-pane>
        <el-tab-pane label="示例" name="test" v-if="data.component">
          <pre
            class="code"
            v-html="renderHtml(data.component.__sourceCode)"
          ></pre>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Prism from "prismjs";
import "prismjs/themes/prism.css";
import list from "./list";

export default {
  data() {
    return {
      data: null,
      activeName: null
    };
  },
  watch: {
    $route: function () {
      this.init();
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let query = this.$route.query;
      if (query && query.parent && query.name) {
        for (let i = 0; i < list.length; i++) {
          if (query.parent == list[i].name) {
            for (let j = 0; j < list[i].children.length; j++) {
              const item = list[i].children[j];
              if (item.name == query.name) {
                this.data = item;
                this.activeName = this.data.component ? "test" : "template";
                return;
              }
            }
          }
        }
      }
    },
    renderHtml(source) {
      if (source) {
        return Prism.highlight(source, Prism.languages.html, "html");
      }
    }
  }
};
</script>
